<!-- @Author: Yu_Bo -->
<template>
	<view class="addedit">
		<view class="addedit_txt">
			<view class="left">
				地址类型
			</view>
			<view class="right">
				<view class="right_txt" :class="isschool==0?'right_txt_color':''" @click="addressChang(0)">
					<image v-if="isschool==0" src="@/static/images/img/chang_icon_b.png" mode=""></image>
					<image v-else src="@/static/images/img/chang_icon_a.png" mode=""></image>
					学校地址
				</view>
				<view class="right_txt" :class="isschool==1?'right_txt_color':''" @click="addressChang(1)">
					<image v-if="isschool==1" src="@/static/images/img/chang_icon_b.png" mode=""></image>
					<image v-else src="@/static/images/img/chang_icon_a.png" mode=""></image>
					非学校地址
				</view>
			</view>
		</view>
		<view class="addedit_txt">
			<view class="left">
				联系人
			</view>
			<view class="right">
				<u-input v-model="name" type="text" :clearable="false" placeholder="请填写联系人姓名"
					:placeholder-style="placeholderStyle" />
			</view>
		</view>
		<view class="addedit_txt">
			<view class="left">
				联系电话
			</view>
			<view class="right">
				<u-input v-model="phone" type="number" :clearable="false" placeholder="请填写联系电话"
					:placeholder-style="placeholderStyle" />
			</view>
		</view>
		<view class="addedit_txt" v-if="isschool==0">
			<view class="left">
				楼栋号
			</view>
			<view class="right">
				<u-input v-model="building" type="number" :clearable="false" placeholder="请填写楼栋号"
					:placeholder-style="placeholderStyle" />
			</view>
		</view>
		<view class="addedit_txt" v-if="isschool==0">
			<view class="left">
				寝室号
			</view>
			<view class="right">
				<u-input v-model="chamber" type="number" :clearable="false" placeholder="请填写寝室号（选填）"
					:placeholder-style="placeholderStyle" />
			</view>
		</view>
		<view class="addedit_txt" v-if="isschool==1">
			<view class="left">
				地址信息
			</view>
			<view class="right" :class="addressName?'':'right_color'" @click="show = true">
				<view class="line_one">
					{{addressName || "请选择省市区"}}
				</view>
				<image src="@/static/images/img/icon_address.png" mode=""></image>
			</view>
		</view>
		<view class="addedit_txt" v-if="isschool==1">
			<view class="left">
				详细地址
			</view>
			<view class="right">
				<u-input v-model="detail" type="text" :clearable="false" placeholder="请填写具体详细地址"
					:placeholder-style="placeholderStyle" />
			</view>
		</view>
		<view class="addedit_txt">
			<view class="left">
				是否默认
			</view>
			<view class="right">
				<u-switch v-model="isdefault" active-color="#5A68FF" inactive-color="#DCDCDC" size="30"></u-switch>
			</view>
		</view>
		<!-- 底部按钮 -->
		<c-footer>
			<view class="footer_btn_two" v-if="id">
				<view class="btn_txt_left" @click="delBtn">
					<u-loading v-if="delloading" mode="flower" color="#5A68FF"></u-loading>
					删除
				</view>
				<view class="btn_txt color_right page_button" @click="saveBtn">
					<u-loading v-if="saveLoading" mode="flower" color="#ffffff"></u-loading>
					保存
				</view>
			</view>
			<view class="footer_btn" v-else>
				<view class="btn_txt color_right page_button" @click="saveBtn">
					<u-loading v-if="saveLoading" mode="flower" color="#ffffff"></u-loading>
					保存
				</view>
			</view>
		</c-footer>
		<!-- 地址选择 -->
		<u-select 
			v-model="show" 
			mode="mutil-column-auto" 
			:list="addressList" 
			:default-value="defaultValue" 
			title="请选择" 
			value-name="id"
			label-name="name"
			child-name="area"
			:safe-area-inset-bottom='true' 
			@confirm="confirm">
		</u-select>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		components: {},
		data() {
			return {
				placeholderStyle: "color: #999999",
				show: false,
				// 
				id: "",
				isschool: 0,
				name: "",
				phone: "",
				// 
				building: "",
				chamber: "",
				// 
				defaultValue: [],
				addressName: "",
				province_id: "",
				city_id: "",
				region_id: "",
				detail: "",
				// 
				isdefault: false,
				// 
				delloading: false,
				saveLoading: false,
			}
		},
		computed: {
			...mapState({
				addressList: (state) => state.addressList,
			}),
		},
		onLoad(opt) {
			if (opt.id) {
				this.id = opt.id
				uni.setNavigationBarTitle({
					title: "修改地址"
				})
				this.getDetails()
			}
		},
		onShow() {},
		methods: {
			// 获取地址详情
			getDetails() {
				var that = this
				var params = {
					id: that.id
				}
				that.$httpApi.addressDetail(params).then((res) => {
					if (res.code == 1) {
						console.log(res)
						that.isschool = res.data.isschool || 0
						that.name = res.data.name
						that.phone = res.data.phone
						that.isdefault = res.data.isdefault == 1 ? true : false
						if (that.isschool == 0) {
							// 学校地址
							that.building = res.data.building
							that.chamber = res.data.chamber
						} else {
							// 非学校只
							that.province_id = res.data.province_id
							that.city_id = res.data.city_id
							that.region_id = res.data.region_id
							that.detail = res.data.detail
							that.confirmIndex()
						}
					}
				})
			},
			// 地址类型
			addressChang(val) {
				this.isschool = val
			},
			// 选择地址
			confirm(arr) {
				console.log(arr)
				this.province_id = arr[0].value
				this.city_id = arr[1].value
				this.region_id = arr[2].value
				this.confirmIndex()
			},
			// 
			confirmIndex() {
				var index = this.addressList.findIndex(item=>item.id == this.province_id)
				this.defaultValue.push(index)
				this.addressName = this.addressList[index].name
				var idx = this.addressList[index].area.findIndex(item=>item.id == this.city_id)
				this.defaultValue.push(idx)
				this.addressName = this.addressName+' '+this.addressList[index].area[idx].name
				var ix = this.addressList[index].area[idx].area.findIndex(item=>item.id == this.region_id)
				this.defaultValue.push(ix)
				this.addressName = this.addressName+' '+this.addressList[index].area[idx].area[ix].name
			},
			// 保存
			saveBtn() {
				var that = this
				if (that.name == "") {
					that.$tips.showToast('请填写联系人姓名')
					return
				}
				if (that.phone == '' || !that.$test.phoneTrue(that.phone)) {
					that.$tips.showToast('请填写正确的联系电话')
					return
				}
				if (that.isschool == 0 && that.building == "") {
					that.$tips.showToast('请填写楼栋号')
					return
				}
				if (that.isschool == 1 && that.province_id == "") {
					that.$tips.showToast('请选择省市区')
					return
				}
				if (that.isschool == 1 && that.detail == "") {
					that.$tips.showToast('请填写具体详细地址')
					return
				}
				if(that.saveLoading) return
				that.saveLoading = true
				var params = {}
				if (that.isschool == 0) {
					params = {
						isschool: that.isschool,
						name: that.name,
						phone: that.phone,
						building: that.building,
						chamber: that.chamber,
						isdefault: that.isdefault ? 1 : 0,
					}
				}
				if (that.isschool == 1) {
					params = {
						isschool: that.isschool,
						name: that.name,
						phone: that.phone,
						province_id: that.province_id,
						city_id: that.city_id,
						region_id: that.region_id,
						detail: that.detail,
						isdefault: that.isdefault ? 1 : 0,
					}
				}
				if (that.id) {
					params.id = that.id
					that.$httpApi.addressEdit(params).then((res) => {
						that.saveLoading = false
						if (res.code == 1) {
							that.$tips.showToast(res.msg)
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						}
					})
				} else {
					that.$httpApi.addressAdd(params).then((res) => {
						that.saveLoading = true
						if (res.code == 1) {
							that.$tips.showToast(res.msg)
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						}
					})
				}
			},
			// 删除
			delBtn() {
				var that = this
				if(that.delloading) return
				that.delloading = true
				var params = {
					id: that.id
				}
				that.$httpApi.addressDel(params).then((res) => {
					that.delloading = false
					if (res.code == 1) {
						that.$tips.showToast(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				})
			},
		},
	}
</script>

<style lang='scss' scoped>
	.addedit {
		width: 100%;
		padding: 30rpx 30rpx;

		.addedit_txt {
			width: 100%;
			height: 112rpx;
			margin-bottom: 30rpx;
			padding: 0 30rpx;
			background: #F6F6F6;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}

			.right {
				width: 450rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #303133;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				image {
					display: block;
					width: 36rpx;
					height: 36rpx;
					margin-left: 10rpx;
				}

				.icon {
					display: block;
					width: 28rpx;
					height: 28rpx;
					margin-left: 10rpx;
				}

				u-input {
					width: 100%;
					;
				}

				::v-deep .u-input {
					width: 100%;

					.u-input__input {
						width: 100%;
						text-align: right;
					}
				}

				.right_txt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					display: flex;
					align-items: center;

					image {
						display: block;
						width: 32rpx;
						height: 32rpx;
						margin-right: 12rpx;
					}
				}

				.right_txt:first-child {
					margin-right: 50rpx;
				}

				.right_txt_color {
					color: #5A68FF;
				}
			}

			.right_color {
				color: #999999;
			}
		}

		.footer_btn {
			width: 100%;
			padding: 30rpx 30rpx;
			background: #fff;

			.btn_txt {
				width: 100%;
				height: 90rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.footer_btn_two {
			width: 100%;
			padding: 30rpx 30rpx;
			background: #fff;
			display: flex;
			justify-content: space-between;

			.btn_txt_left {
				width: 330rpx;
				height: 86rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #5A68FF;
				border-radius: 45rpx;
				border: 2rpx solid #5A68FF;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.btn_txt {
				width: 330rpx;
				height: 90rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>